<!-- category_form.html -->
<!DOCTYPE html>
{% load static %}
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建分类 - 我的博客</title>
    <link rel="stylesheet" href="{% static 'users/bulma.css' %}">
    <style>
        .form-container {
            max-width: 600px;
            margin: 2rem auto;
            padding: 2rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        .form-title {
            border-left: 4px solid #3273dc;
            padding-left: 1rem;
            margin-bottom: 2rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar is-primary">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item" href="/">
                    <strong>我的博客</strong>
                </a>
            </div>
            <div class="navbar-menu">
                <div class="navbar-end">
                    <div class="navbar-item">
                        <a href="{% url 'users:user_info' %}" class="button is-light">
                            返回个人中心
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主表单 -->
    <div class="container">
        <div class="form-container">
            <h2 class="title is-3 form-title">新建文章分类</h2>
            
            <form method="post">
                {% csrf_token %}
                
                <!-- 分类名称 -->
                <div class="field">
                    <label class="label">分类名称</label>
                    <div class="control">
                        <input class="input" type="text" name="name" 
                               required maxlength="32"
                               placeholder="请输入分类名称（最多32字）">
                    </div>
                    {% if form.name.errors %}
                    <p class="help is-danger">{{ form.name.errors }}</p>
                    {% endif %}
                </div>

                <!-- 分类描述 -->
                <div class="field">
                    <label class="label">分类描述</label>
                    <div class="control">
                        <textarea class="textarea" name="desc" 
                                  rows="3" maxlength="200"
                                  placeholder="请输入分类描述（可选）"></textarea>
                    </div>
                </div>

                <!-- 表单操作 -->
                <div class="field is-grouped is-grouped-centered mt-5">
                    <div class="control">
                        <button type="submit" class="button is-primary is-medium">
                            提交创建
                        </button>
                    </div>
                    <div class="control">
                        <a href="{% url 'users:user_info' %}" class="button is-light is-medium">
                            取消返回
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="content has-text-centered">
            <p>© 2025 我的博客 版权所有</p>
        </div>
    </footer>
</body>
</html>